<template>
  <div class="pushHouse">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <div class="form">
      <van-cell-group>
        <van-cell title="房源信息"/>
        <van-cell title="小区名称" value="请输入小区名称 > "/>
      </van-cell-group>
          <van-field v-model="value1" label="租  金" placeholder="请输入租金/月" />
          <van-field v-model="value2" label="建筑面积" placeholder="请输入建筑面积" />

          <van-cell is-link title="户型" @click="show = true"/>
          <van-action-sheet v-model="show" :actions="actions1" @select="onSelect" />

          <van-cell is-link title="所在楼层" @click="show2 = true"/>
          <van-action-sheet v-model="show2" :actions="actions2" @select="onSelect" />

          <van-cell is-link title="朝向" @click="show3 = true"/>
          <van-action-sheet v-model="show3" :actions="actions3" @select="onSelect" />
          <van-cell title="房屋标题"/>
          <van-cell-group>
            <van-field v-model="value3" placeholder="请输入标题（例如：整租 小区名 2室 5000元）" />
          </van-cell-group>
          <van-cell title="房屋图像"/>
          <van-uploader :after-read="afterRead" />
          <van-cell title="房屋配置"/>
          <van-grid :column-num="5">
          <van-grid-item icon="font-o" text="衣柜" />
          <van-grid-item icon="font-o" text="洗衣机" />
          <van-grid-item icon="font-o" text="空调" />
          <van-grid-item icon="fire-o" text="天然气" />
          <van-grid-item icon="font-o" text="冰箱" />
          <van-grid-item icon="font-o" text="暖气" />
          <van-grid-item icon="cashier-o" text="电视" />
          <van-grid-item icon="font-o" text="热水器" />
          <van-grid-item icon="font-o" text="宽带" />
          <van-grid-item icon="font-o" text="沙发" />
          </van-grid>
          <van-cell title="房屋描述"/>
          <van-cell-group>
            <textarea class="textarea" cols="375" rows="5" placeholder="请输入房屋描述信息" ></textarea>
          </van-cell-group>
    </div>
    <div class="con"></div>
    <div class="btn">
      <div class="left">取消</div>
      <div class="right">提交</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: '',
      value2: '',
      value3: '',
      show: false,
      show2: false,
      show3: false,
      actions1: [{ name: '一室' }, { name: '二室' }, { name: '三室' }],
      actions2: [{ name: '高楼层' }, { name: '中楼层' }, { name: '低楼层' }],
      actions3: [{ name: '东' }, { name: '南' }, { name: '西' }, { name: '北' }]
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
    }, // 上传文件
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>

<style lang="less" scoped>
.pushHouse{
  background-color: #f5f5f9;
}
.textarea{
  font-size: 14px;
  height: 128px;
  color: #9999;
  border: 1px solid #fff;
}
.con{
  height: 70px;
}
.btn{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  text-align: center;
  width: 100%;
  height: 45px;
  font-size: 15px;
  .left{
    line-height: 45px;
    width: 188px;
    height: 100%;
    background-color: #fff;
    color: #21b97a;
  }
  .right{
    width: 188px;
    height: 100%;
    background-color: #21b97a;
    line-height: 45px;
    color: #fff;
  }
}
</style>
